<template>
	<div class="u-page-custom">
		<u-navbar title=" " :background="background" :border-bottom="false" back-icon-color="#040503"></u-navbar>
		<div style="position: relative;">
			<div style="width: 100%;height: 200rpx;background: url('https://www-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/img/HomePage/EnterpriseUsersBg2.png') no-repeat;background-size: 100%;">
				
			</div>
			<div class="enterprise-avatar avatar-shadow">
				<u-avatar size="160" mode="square" bg-color="#ffffff" :src="EnterpriseInfo.enterpriseInfo.avatar"></u-avatar>
			</div>
			<div class="enterprise-content">
				<div style="height: 5rpx;"></div>
				<div class="enterprise-top">
					<div class="enterprise-top-item">
						<div class="u-flex">
							<div class="enterprise-name1" v-if="!isEnoughLength(EnterpriseInfo.enterpriseInfo.enterpriseName)">
								{{EnterpriseInfo.enterpriseInfo.enterpriseName?EnterpriseInfo.enterpriseInfo.enterpriseName:''}}
							</div>
							<div class="enterprise-name2" v-else>
								{{EnterpriseInfo.enterpriseInfo.enterpriseName?EnterpriseInfo.enterpriseInfo.enterpriseName:''}}
							</div>
							<div class="u-pl-10">
								 <u-image width="40rpx" height="40rpx" src="https://www-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/img/Enterprise/EnterpriseLevel1.png" v-if="EnterpriseInfo.enterpriseInfo.enterpriseTop > 0"></u-image>
								 <u-image width="40rpx" height="40rpx" src="https://www-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/img/Enterprise/EnterpriseLevel2.png" v-else></u-image>
							</div>
						</div>
						<div>
							ID：{{EnterpriseInfo.enterpriseInfo.enterpriseNo?EnterpriseInfo.enterpriseInfo.enterpriseNo:''}}
						</div>
					</div>
				</div>
				<!-- 简介 -->
				<div class="u-pt-10 enterprise-bottom">
					<div class="u-flex u-pt-10" @click="toEnterpriseInfo">
						<div class="enterprise-introduction">
							{{EnterpriseInfo.enterpriseInfo.introduction?EnterpriseInfo.enterpriseInfo.introduction:'暂无'}}
						</div>
						<div>
							 <u-icon name="arrow-right" color="#000000"></u-icon>
						</div>
					</div>
					<div class="u-flex u-pt-20 u-pb-10 u-fz-15">
						<div class="u-flex">
							<u-icon name="map" color="#000000" size="30"></u-icon>
							<div class="u-pl-5">
								{{EnterpriseInfo.enterpriseInfo.province?EnterpriseInfo.enterpriseInfo.province:''}} {{EnterpriseInfo.enterpriseInfo.city?EnterpriseInfo.enterpriseInfo.city:''}}
							</div>
						</div>
						<div class="u-pl-20 u-flex">
							<u-icon name="calendar" color="#000000" size="30"></u-icon>
							<div class="u-pl-5">成立{{getYearsByCreateTime(EnterpriseInfo.enterpriseInfo.establishmentDate)}}</div>
						</div>
					</div>
					<div class="divider-line"></div>
					<div class="enterprise-brand">
						<div class="u-flex">
							<div class="sub-text-color">
								关联品牌
							</div>
							<div class="u-pl-10 brand-list">
								{{EnterpriseInfo.relevancyItemDto.brandList.join(' ')}}
							</div>
						</div>
						<div class="enterprise-follow">
							<div>{{followed}}</div>
							<div style="padding-left: 10rpx;">
								<u-icon name="arrow-down-fill" color="#b0aeaf" size="20"></u-icon>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div style="height: 330rpx;"></div>
			<div class="u-mt-10" style="border-radius: 15rpx">
				<div style="height: 10rpx;background-color: #ededed;"></div>
				<u-tabs :list="Tablist" :is-scroll="false" bar-height="6" bar-width="60" active-color="#000000"
						font-size="34" :bar-style="BarStyle" bg-color="#ededed" :current="current" @change="change"></u-tabs>
				<div style="padding-bottom: 30rpx;">
					<!-- 动态 -->
					<div v-if="current==0">
						<div style="border-radius: 15rpx;background-color: #ffffff;" v-if="TrendsList && TrendsList.length>0">
							<div class="trends-item" v-for="(item,index) in TrendsList" :key="index">
								<div class="trends-item-top">
									<u-avatar :src="EnterpriseInfo.enterpriseInfo.avatar"></u-avatar>
									<div class="trends-item-top-content">
										<div class="u-title u-fz-16">
											{{EnterpriseInfo.enterpriseInfo.enterpriseName?EnterpriseInfo.enterpriseInfo.enterpriseName:''}}
										</div>
										<div class="u-cl-content">{{item.createTime?item.createTime:''}}</div>
									</div>
								</div>
								<div class="trends-item-bottom">
									<div style="width: 85%;">
										<div class="u-fz-15" v-if="item.title">{{item.title}}</div>
										<div class="trends-item-bottom-content" @click="toTrendDetails(item)">
											<u-image width="150rpx" height="150rpx" :src="item.image"></u-image>
											<div class="u-pl-5">
												<div class="goods-title">
													{{item.subject?item.subject:''}}
												</div>
												<div class="u-fz-13" style="color: #9f9d9e;">{{item.content?item.content:''}}</div>
												<div class="u-fz-19 u-font-bold u-pt-10" style="color: #ea4d5e;">&yen;{{item.price?item.price:'0.0'}}</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="u-border-top" v-else>
							<div class="u-text-center" style="padding-top: 20%;">
								<u-empty text="暂无数据" mode="data"></u-empty>
							</div>
						</div>
					</div>
					<!-- 工作 -->
					<div v-if="current==1">
						<div v-if="JobList && JobList.length>0">
							<div class="u-mt-10 job-item" v-for="(item,index) in JobList" :key="index">
								<div @click="toJobDetails(item)">
									<div class="job-item-top">
										<span class="job-title-tag" v-if="item.taskKeyword && item.taskType!='评测需求'">{{item.taskKeyword}}</span>
										<span class="job-task-name">
											{{item.taskName?item.taskName:''}}
										</span>
									</div>
									<div class="u-flex" style="padding: 5rpx 30rpx;">
										<div class="job-task-price">&yen;{{item.taskPrice?item.taskPrice:0}}</div>
										<div><u-tag :text="item.taskLabel" mode="plain" size="mini" :color="item.taskColor" :border-color="item.taskColor" /></div>
										<div v-if="item.couponLabel"><u-tag :text="item.couponLabel" mode="plain" size="mini" color="#e66142" bg-color="#faede4" border-color="#faede4" /></div>
									</div>
									<div class="u-flex" style="padding: 0 20rpx;">
										<div style="padding: 0 5rpx;" v-for="(titem,tindex) in item.imageUrl.split(',')" v-if="tindex<3">
											<u-image width="220rpx" height="220rpx" :src="titem" border-radius="10"></u-image>
										</div>
									</div>
								</div>
								<div class="job-time">
									{{item.createTime}}
								</div>
							</div>
						</div>
						<div class="u-border-top" v-else>
							<div class="u-text-center" style="padding-top: 20%;">
								<u-empty text="暂无数据" mode="data"></u-empty>
							</div>
						</div>
					</div>
					<!-- 商品 -->
					<div v-if="current==2">
						<div class="aui-list-box u-pl-5 u-pr-5 u-mt-10" v-if="GoodSalesList && GoodSalesList.length>0">
						    <a href="javascript:;" class="aui-list-item" v-for="(item,index) in GoodSalesList" :key="index"
						       @click="toGoodsDetails(item)">
						      <div class="aui-list-theme-img">
						        <u-image width="100%" height="343rpx" :src="item.goodsImages.split(',')[0]"></u-image>
						      </div>
						      <div class="aui-list-theme-message">
						        <div class="u-flex line-ellipsis">
						          <h3 class="aui-list-theme-title">{{ item.goodsName }}</h3>
						        </div>
						        <div class="u-flex pt-3">
						          <u-image width="25rpx" height="25rpx"
						                   src="https://dev-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/icon/Life/life_label_icon.png"></u-image>
						          <div class="goods-label-text">玫丽全网最低价</div>
						        </div>
						        <div class="u-flex u-pb-5" style="justify-content: space-between;">
									<span class="amount-money font-baseline">
										<span class="u-fz-18 u-font-bold">&yen;{{ item.discountPrice }}</span>
									</span>
									<span class="sales-volume">
										本期售{{ item.soldNum ? item.soldNum : 0 }}
									</span>
						        </div>
						      </div>
						    </a>
						</div>
						<div class="u-text-center" style="padding-top: 20%;" v-else>
						    <u-empty text="暂无数据" mode="data"></u-empty>
						</div>
					</div>
					<!-- 学习 -->
					<div v-if="current == 3">
						<div class="aui-list-box u-mt-10 u-pl-5 u-pr-5" v-if="CourseList && CourseList.length>0">
						  <a href="javascript:;" class="aui-list-item" v-for="(item,index) in CourseList" :key="index"
						     @click="toCourseDetails(item)">
						    <div class="aui-list-theme-img">
						      <u-image width="100%" height="200rpx" :src="item.mainDiagram"></u-image>
						    </div>
						    <div class="aui-list-theme-message">
						      <div class="u-flex line-ellipsis">
						        <h3 class="aui-list-theme-title title-name">{{item.title}}</h3>
						      </div>
						      <div class="u-flex u-pt-5" style="justify-content: space-between;">
						        <div class="u-pb-5" v-if="item.tags && item.tags.split(',').length>0">
						          <u-tag
						              v-for="(titem, tindex) in item.tags.split(',').slice(0, 2)"
						              :key="tindex"
						              :text="titem"
						              type="info"
						              mode="dark"
						              size="mini"
						              color="#eb5468"
						              bg-color="#fff3f3"
						          ></u-tag>
						        </div>
						      </div>
						    </div>
						  </a>
						</div>
						<div class="u-border-top" v-else>
							<div class="u-text-center" style="padding-top: 20%;">
								<u-empty text="暂无数据" mode="data"></u-empty>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {

  data() {
    return {
		enterpriseNo: '',//企业id
		userId: '',
		background: {
		  // 导航栏背景图
		  background: 'url(https://www-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/img/HomePage/EnterpriseUsersBg1.jpg) no-repeat',
		  // 还可以设置背景图size属性
		  backgroundSize: 'cover'
		},
		followed: '已关注',
		followList: [
			{
				label: '已关注',
				value: 1,
			},
			{
				label: '取消关注',
				value: 2,
			}
		],
		current: 0,
		Tablist: [
			{
				name: '动态'
			}, 
			{
				name: '工作'
			}, 
			{
				name: '商品'
			},
			{
				name: '创作'
			}
		],
		BarStyle: {backgroundColor: '#0045d8'},
		pageNum0: 1,
		pageSize0: 10,
		TrendsList: [],
		pageNum1: 1,
		pageSize1: 10,
		JobList: [],
		pageNum2: 1,
		pageSize2: 10,
		GoodSalesList: [],
		pageNum3: 1,
		pageSize3: 10,
		CourseList: [],
		EnterpriseInfo: {}
	}
  },

  mounted() {

  },

  onShow() {},

  onPullDownRefresh() {
	  if(this.current == 0){
		this.pageNum0 = 1
	  }else if(this.current == 1){
	  	this.pageNum1 = 1
	  }else if(this.current == 2){
	  	this.pageNum2 = 1
	  }else if(this.current == 3){
	  	this.pageNum3 = 1
	  }
	  this.getDataList()
      // 停止Loading
      uni.stopPullDownRefresh();
  },

  onReachBottom() {
	if(this.current == 0){
		this.pageNum0 += 1
	}else if(this.current == 1){
		this.pageNum1 += 1
	}else if(this.current == 2){
		this.pageNum2 += 1
	}else if(this.current == 3){
		this.pageNum3 += 1
	}
	this.getDataList()
  },

  onLoad(options) {
	  if(this.isNotNull(options.userId) && this.isNotNull(options.enterpriseNo)){
		  this.userId = options.userId
		  this.enterpriseNo = options.enterpriseNo
		  this.initEnterpriseInfo()
		  this.getDataList()
	  }
  },

  methods: {
		change(index) {
			this.current = index;
			this.getDataList()
		},
		
		/** 
		 * 初始化企业详情
		 */
		async initEnterpriseInfo() {
			let result = await this.$u.api.unifyMiniRestGet({
				systemid: "meily",
				url: "/enterprise/details/info/" + this.userId,
				loading: true
			});
			if (result.code == 200) {
				this.EnterpriseInfo = result.data
			}
		},
		
		/**
		 * 获取市场推广类列表数据
		 */
		async getDataList() {
			let pageNum = 1
			let pageSize = 10
			if(this.current == 0){
				pageNum = this.pageNum0
				pageSize = this.pageSize0
			}else if(this.current == 1){
				pageNum = this.pageNum1
				pageSize = this.pageSize1
			}else if(this.current == 2){
				pageNum = this.pageNum2
				pageSize = this.pageSize2
			}else if(this.current == 3){
				pageNum = this.pageNum3
				pageSize = this.pageSize3
			}
			let result = await this.$u.api.unifyMiniRest({
				systemid: "meily",
				url: "/behavioral/list",
				enterpriseNo: this.enterpriseNo,
				type: this.current,
				pageNum: pageNum,
				pageSize: pageSize,
				loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
			});
			if (result.code == 200) {
				if(this.current == 0){//动态
					if (this.pageNum0 != 1) {
						this.TrendsList = this.TrendsList.concat(result.rows)
					} else {
						this.TrendsList = result.rows
					}
				}else if(this.current == 1){//工作
					if (this.pageNum1 != 1) {
						this.JobList = this.JobList.concat(result.rows)
					} else {
						this.JobList = result.rows
					}
				}else if(this.current == 2){//商品
					if (this.pageNum2 != 1) {
						this.GoodSalesList = this.GoodSalesList.concat(result.rows)
					} else {
						this.GoodSalesList = result.rows
					}
				}else if(this.current == 3){//创作
					if (this.pageNum3 != 1) {
						this.CourseList = this.CourseList.concat(result.rows)
					} else {
						this.CourseList = result.rows
					}
				}
			}
		},
		
		/** 
		 * 跳转到企业详情
		 */
		toEnterpriseInfo() {
			if(this.isNotNull(this.EnterpriseInfo.enterpriseInfo.userId)){
				this.$u.route('pages_tabbar_contact/index_contact/EnterpriseInfo?userId=' + this.EnterpriseInfo.enterpriseInfo.userId)
			}
		},
		
		//生成一个根据日期参数返回距离今天是多少年，如果不够一年则返回月份数的函数
		getYearsByCreateTime(createTime){
			const date = new Date(createTime)
			const today = new Date()
			const diffInMilliseconds = today - date
			const diffInYears = parseInt(diffInMilliseconds / (1000 * 60 * 60 * 24 * 365))
			const diffInMonths = parseInt((diffInMilliseconds % (1000 * 60 * 60 * 24 * 365)) / (1000 * 60 * 60 * 24 * 30))
			if (diffInYears >= 1) {
				return diffInYears + "年"
			} else {
				return diffInMonths + "个月"
			}
		},
		
		/**
		 * 根据公司名称的长度计算是否在范围内
		 */
		isEnoughLength(name) {
			return this.$u.test.rangeLength(name, [0, 12])
		},
		
		/** 
		 * 动态-跳转详情
		 */
		toTrendDetails(item) {
			this.$u.route(item.jumpUrl)
		},
		
		/** 
		 * 工作-跳转详情
		 */
		toJobDetails(item) {
			this.$u.route(item.taskUrl)
		},
		
		/**
		 * 学习-跳转详情
		 */
		async toCourseDetails(item) {
		  this.$u.route('/pages_private_scene1/CourseZone/CourseDetail?id=' + item.id);
		},
  }

};
</script>

<style lang="scss" scoped>
.small-text {
	font-size: 30rpx;
	color: #b0aeaf;
}

.u-page-custom {
    position: relative;
    min-height: 100%;
    height: auto;
	// background-color: #f0f6fc;
	background-color: #ededed;
}

.pl-7 {
	padding-left: 14rpx;
}

.job-title-tag {
	color: #ffffff;
	background-color: #40972f;
	border-radius: 6rpx;
	font-size: 26rpx;
	margin-right: 3rpx;
	font-weight: 350;
	padding: 2rpx 10rpx;
	margin-right: 5rpx;
}

/* 商品列表 */
.aui-list-box {
  overflow: hidden;
  position: relative;
}

.aui-list-item {
  width: 47%;
  float: left;
  margin: 0 0 2% 2%;
  display: block;
  overflow: hidden;
  background-color: #ffffff;
  /* box-shadow: 5rpx 5rpx 5rpx 5rpx #f3f2f2eb; */
  border-radius: 10rpx;
}

.aui-list-theme-img {
  height: auto;
  width: 100%;
  position: relative;
}

.aui-list-theme-img img {
  width: 100%;
  height: auto;
  display: block;
  border: none;
}

.aui-list-theme-message {
  background: #ffffff;
  padding: 10rpx 10rpx;
}

.aui-list-theme-title {
  color: #4a4a4a;
  font-size: 30rpx;
  line-height: 38rpx;
  margin-top: 5rpx;
}

.aui-list-theme-message p {
  /*color: #ff3b52;*/
  font-size: 24rpx;
  font-weight: bold;
}

.aui-list-theme-message span.line-through {
  font-size: 0.7rem;
  color: #919191;
  padding: 0 0.2rem;
  text-decoration: line-through;
}

.aui-list-theme-message span.none-line-through {
  font-size: 0.7rem;
  color: #919191;
  padding: 0 0.2rem;
}

.aui-list-theme-message p i {
  font-style: normal;
  font-size: 0.7rem;
  padding: 0 0.2rem;
  color: #ff3b52;
  float: right;
  width: 25px;
  height: 25px;
}

.aui-list-theme-message p em {
  font-style: normal;
  font-size: 0.7rem;
  color: #ff3b52;
  text-decoration: line-through;
  font-weight: normal;
}

/* 两行或多行显示... */
.line-ellipsis {
  width: 320rpx;
  white-space: nowrap;
  overflow: hidden;
  /* text-overflow: ellipsis; */
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}

.goods-label-text {
  color: #ba8e41;
  font-size: 22rpx;
  font-weight: 300;
  padding-left: 3rpx;
}

.font-baseline {
  display: flex;
  align-items: baseline;
}

.amount-money {
  color: #ea4d5e;
  font-size: 22rpx;
}

.sales-volume {
  color: #b7b7b7;
  font-size: 22rpx;
}

.sub-text-color {
	color: #bcbcbc;
}

.divider-line {
	border-bottom: 2rpx #efeeee  solid;
}

.trends-item {
	width: 93%;
	margin: 0 auto;
	padding-top: 20rpx;
}

.trends-item-top {
	display: flex;
	align-items: center;
	height: 110rpx;
}

.trends-item-top-content {
	display: flex;
	flex-direction: column;
	padding-left: 20rpx;
}

.trends-item-bottom {
	display: flex;
	flex-direction: row-reverse;
}

.trends-item-bottom-content {
	background-color: #f7f8fb;
	display: flex;
	padding: 20rpx;
	margin-top: 20rpx;
	border-radius: 10rpx;
}

.goods-title {
	padding-top: 5rpx;
	width: 390rpx;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}

.job-item {
	background-color: #ffffff;
	width: 95%;
	margin: 0 auto;
	border-radius: 10rpx;
}

.job-item-top {
	padding: 30rpx 30rpx 5rpx 30rpx;
	width: 100%;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.job-task-name {
	color: #000000;
	font-size: 34rpx;
	font-weight: bold;
	height: 50rpx;
	line-height: 50rpx;
}

.job-task-price {
	color: #f94d4d;
	font-size: 44rpx;
	font-weight: bold;
	margin: 0 10rpx 10rpx 0;
}

.job-time {
	padding: 20rpx 30rpx;
	color: #bcbcbc;
}

.enterprise-avatar {
	position: absolute;
	top: 100rpx;
	left: 30rpx;
	z-index: 3;
}

.enterprise-content {
	position: absolute;
	width: 100%;
	height: 400rpx;
	background: #ffffff;
	top: 140rpx;
	padding-bottom: 380rpx;
	border-radius: 15rpx;
	z-index: 2;
}

.enterprise-top {
	display: flex;
	flex-direction: row-reverse;
	height: 100rpx;
}

.enterprise-top-item {
	display: flex;
	flex-direction: column;
	padding-top: 10rpx;
	width: 70%;
	padding-right: 20rpx;
}

.enterprise-name1 {
	font-size: 36rpx;
	font-weight: bold;
	width: 100%;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}

.enterprise-name2 {
	font-size: 36rpx;
	font-weight: bold;
}

.enterprise-bottom {
	width: 93%;
	margin: 0 auto;
}

.enterprise-introduction {
	width: 95%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 30rpx;
}

.enterprise-brand {
	display: flex;
	justify-content: space-between;
	padding-top: 20rpx;
	font-size: 30rpx;
}

.enterprise-follow {
	font-size: 24rpx;
	width: 150rpx;
	height: 50rpx;
	border-radius: 20rpx;
	background-color: #f6f6f6;
	display: flex;
	justify-content: center;
	align-items: center;
}

.avatar-shadow {
	box-shadow: 0 5rpx 5rpx 0rpx #ebebeb;
}
</style>
